<template>
    <div>
        <h1>会员注册</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" v-model="list.name"/>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="password" v-model="list.password"/>
                    </td>
                </tr>
                <tr>
                    <td>出生地</td>
                    <td>
                       <select v-model="list.city">
                            <option value="">请选择出生地</option>
                            <option :value="item.name" v-for="item in citys" :key="item.id">{{ item.name }}</option>
                       </select>
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="date" v-model="list.date">
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="男" v-model="list.sex"/>男
                        <input type="radio" name="sex" value="女" v-model="list.sex"/>女
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" name="hobbys" value="睡觉" v-model="list.hobby"/>睡觉
                        <input type="checkbox" name="hobbys" value="喝酒" v-model="list.hobby"/>喝酒
                        <input type="checkbox" name="hobbys" value="游玩" v-model="list.hobby"/>游玩                       
                    </td>
                </tr>
                <tr>
                    <td>个人简介</td>
                    <td>
                       <textarea rows="5" cols="50" v-model="list.other"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>是否同意协议</td>
                    <td>
                        <input type="checkbox"  v-model="list.desc" >
                        <a href="####">协议</a>

                    </td>
                </tr>
                <tr>
                   
                    <td colspan="2">
                        <input type="button"  value="注册" class="btn btn-primary" @click="add">
                    </td>
                </tr>   

            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    import{ref,reactive}from 'vue'

    let citys=ref([
        {id:1,name:'北京'},
        {id:2,name:'天津'},
        {id:3,name:'上海'},
        {id:4,name:'广州'},
    ]      
    )

    let list=reactive({
        name:'',
        password:'',
        city:'',
        date:'',
        sex:'男',
        hobby:[],
        other:'',
        desc:false,

    }
    )

    const add=()=>{
        console.log(list);
        
    }

</script>

<style scoped>

</style>